<template>
  <div class="wrapper">
    <div class="header" @click="top">
      <!-- <van-sticky :offset-top="0">
        <van-button type="info"></van-button>
      </van-sticky>-->
      <!-- 吸顶头部部分 -->
      <img src="@/assets/school/school.jpg" alt />
      <p style="color:#fff; margin-top:10px;">国开老年大学</p>
    </div>
    <div class="bannner-con">
      <van-swipe
        class="my-swipe"
        style="width:100%; height:200px;"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item>
          <img src="@/assets/introduce/banner.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/introduce/banner.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/introduce/banner.png" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/introduce/banner.png" alt />
        </van-swipe-item>
      </van-swipe>
      <van-tabs
        title-active-color="#ffa300"
        line-height="5px"
        v-model="activeName"
        color="#fff"
        background="#000"
      >
        <!-- 选择卡标题 -->
        <van-tab title="介绍" name="a" class="tab_name">
          <h3>国家老年开放大学—_2020成人考大专/考本科</h3>
          <p>微课教程 从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域</p>
          <img src="@/assets/school/daxuexq.jpg" alt />
          <span>
            从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
            从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
            从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
            从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
            从入门到精确快速上手快速上手微课教程，从入门《现代信用学》内容简介：纵观当今世界，信用的运动规律还是经济学尚未完全认知的领域
          </span>
        </van-tab>
        <van-tab title="报名" name="b">
          <div class="exportitem">
            <img :src="proveimg" class="proveimg" v-if="isprove" @click="upprovefile(1)" />
            <div class="imgdiv" @click="upprovefile(1)" v-else>
              <p>头像</p>
              <img src="@/assets/introduce/touxiang.png" alt />
              <img src="@/assets/introduce/list3.jpg" />
            </div>
            <input type="file" style="display: none" ref="prove_file" @change="changeprovefile" />
          </div>
          <div class="exportitem1">
            <img :src="frontimg" class="frontimg" v-if="isfront" @click="upprovefile(2)" />
            <div class="imgdiv" @click="upidfront(2)" v-else>
              <img src="@/assets/introduce/bmxinxi.jpg" />
              <label>请上传身份证正面照</label>
              <input type="file" style="display: none" ref="id_front" @change="changeprovefile" />
            </div>
            <img :src="backimg" class="backimg" v-if="isback" @click="upprovefile(3)" />
            <div class="imgdiv" @click="upidback(3)" v-else>
              <img src="@/assets/introduce/bmxinxi.jpg" />
              <label>请上传身份证反面</label>
              <input type="file" style="display: none" ref="id_back" @change="changeprovefile" />
            </div>
          </div>
          <!-- 标题介绍内容 -->
          <div class="information">
            <!-- 上传电话号 -->
            <div class="phone">
              <div class="shuru">
                联系电话
                <input type="text" placeholder="请输入你的手机号" v-model="mobile" />
              </div>
              <div class="zaici">
                再次输入
                <input type="text" placeholder="请再次输入你的手机号" v-model="mobile" />
              </div>
            </div>
            <!-- 健康状况 -->
            <div class="health">
              <span>健康状况</span>
              <ul>
                <!-- <li>{{item.id}}</li> -->
                <li
                  v-for="(item,index) in name1"
                  :key="index"
                  :class="item.flag?'active':''"
                  @click="getItem(item.id)"
                >{{item.name}}</li>
              </ul>
            </div>

            <!-- 课程选择 -->
            <div class="selection">
              <!-- <span>课程选择</span> -->
              <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in list" :key="item" :title="item" />
              </van-list> -->
              <div
                class="con-selection"
                :class="item.flag?'active':''"
                @click="PostItem(item.id)"
                v-for="(item,index) in name"
                :key="index"
              >
                <img :src="item.img" alt />
                <p>{{item.name}}</p>
                <p>
                  {{item.total_class}}
                  <span>￥{{item.price}}</span>
                </p>
              </div>
              <!-- 订单列表 -->
              <div class="order_lie">
                <div class="order">
                  <p>订单列表</p>
                  <ul>
                    <li>中老年钢琴版</li>
                    <li>￥300:00</li>
                  </ul>
                  <ul>
                    <li>中老年 室内设计 基础班</li>
                    <li>￥198:00</li>
                  </ul>
                  <ul>
                    <li>合计</li>
                    <li>￥498:00</li>
                  </ul>
                </div>
              </div>
              <div class="nav_tab">
                <p>
                  终身教育费用
                  <span>￥2589</span>
                </p>
              </div>
              <p></p>
              <div class="submit">
                <button @click="authentication">原价报名(￥2599)</button>
                <button>20万矿金的款报名实名￥590</button>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import Toast from "vant"
import { List, Sign, Qinun, Taglist, Branch, Barschol } from "../request/api";
import "vant/lib/index.css";
import Vant from "vant";
export default {
  name: "",
  data() {
    return {
      list:[
        {
          name:'中老年钢琴版',
          price:'￥300:00'
        },
        {
          name:'中老年 室内设计 基础班',
          price:'￥198:00'
        }
      ],
      list: [],
      proveimg: "" /*缩略图*/,
      frontimg: "",
      backimg: "",
      token: "",
      frontkey: "",
      majorid: "1",
      isprove: false,
      isfront: false,
      isback: false,
      List: [],
      activeName: 0,
      name: [],
      name1: [],
      tids: "",
      // tidss: "",
      tablist: [],
      contentlist: [],
      loading: false,
      finished: false,
      page: 1, //请求第几页
      pageSize: 10, //每页请求的数量
      total: 0, //总共的数据条数
      userid: "111",
      qwe: [],
      asd: [],
      cids: "",
      activeCla: 0,
      checkBox: [],
      clickAll: false,
      activeClass: 2,
      type: 1,
      type1:0,
      provekey: "",
      backkey: "",
      mobile: "",
      code: "",
      activeClass: -1,
      active: 0,
      checked: true,
      currentRate: 0,
      Certif: [],
      photo: "",
      just_img: "",
      back_img: ""
    };
  },
  components: {},
  mounted() {
    let Bra = {
      uid: 1,
      school_id: 1,
      page: 1
    };
    Branch(Bra).then(res => {
      console.log(res.data.data);
      this.name = res.data.data;
    });
    //全国报名接口列表
    let obj = {
      uid: 2,
      type: 2
    };
    Taglist(obj).then(res => {
      console.log(res.data.data);
      this.name1 = res.data.data;
    });
    // 七牛上传token
    Qinun().then(res => {
      console.log(res.data.data);
      this.int1 = res.data.data;
    });

    this.save();
    //老年大学报名接口
    // let Sch = ;
    // 职业技能老年大学报名接口
    Barschol({
      uid: 1,
      type:this.tpye1,
      tel: this.mobile,
      healthy_status: 0,
      hids: 1,
      cids: 1,
      price: 100,
      discount_gold: 500,
      photo: this.photo,
      just_img: this.just_img,
      back_img: this.back_img,
      pay_price:2599
    }).then(res => {
       if(res.code == 200){
        Toast(res.message)
        console.log(res.code)
      }
      console.log(res);
    });
  },
  methods: {
    switchevent: function(type) {
      this.type = type;
      this.contentlist = [];
      this.page = 1;
    },
    upprovefile: function(type) {
      this.$refs.prove_file.click();
      this.type = type;
    },
    // 上传身份证验证
    changeprovefile: function(e) {
      var that = this;
      const files = e.target.files;
      let filename = files[0].name; //只有一个文件
      if (filename.lastIndexOf(".") <= 0) {
        return alert("Please add a valid image!"); //判断图片是否有效
      }
      const fileReader = new FileReader(); //内置方法new FileReader()   读取文件
      fileReader.addEventListener("load", () => {
        if (that.type == 1) {
          that.proveimg = fileReader.result;
        }
        if (that.type == 2) {
          that.frontimg = fileReader.result;
        }
        if (that.type == 3) {
          that.backimg = fileReader.result;
        }
      });
      fileReader.readAsDataURL(files[0]);
      if (that.type == 1) {
        that.proveimg = files[0];
      }
      if (that.type == 2) {
        that.frontimg = files[0];
      }
      if (that.type == 3) {
        that.backimg = files[0];
      }
      const axiosInstance = axios.create({ withCredentials: false });
      let data = new FormData();
      data.append("token", that.int1); //七牛需要的token，叫后台给，是七牛账号密码等组成的hash
      data.append("file", files[0]);
      axiosInstance({
        method: "POST",
        url: "https://upload-z1.qiniup.com", //上传地址
        data: data,
        timeout: 30000 //超时时间，因为图片上传有可能需要很
      })
        .then(data => {
          // console.log(files[0]);
          if (that.type == 1) {
            that.photo = data.data.key;
            console.log(that.photo);
            that.isprove = true;
          }
          if (that.type == 2) {
            that.just_img = data.data.key;
            console.log(that.just_img);
            that.isfront = true;
          }
          if (that.type == 3) {
            that.back_img = data.data.key;
            console.log(that.back_img);
            that.isback = true;
          }
        })
        .catch(function(err) {});
    },
    upidfront: function(type) {
      this.$refs.id_front.click();
      this.type = type;
    },
    upidback: function(type) {
      this.$refs.id_back.click();
      this.type = type;
    },
    authentication: function() {
      var that = this;
      if (that.photo == "") {
        Toast("请上传工作证或职称证明！");
        return false;
      }
      if (that.just_img == "") {
        Toast("请上传身份证正面照！");
        return false;
      }
      if (that.back_img == "") {
        Toast("请上传身份证反面照！");
        return false;
      }
      if (that.mobile == "") {
        Toast("手机号码不能为空！");
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(that.mobile)) {
        Toast("手机号码有误，请重填");
        return false;
      }
    },
    authentication() {
      console.log(this.photo);
      console.log(123);
      var tids = this.asd.join(",");
      var cids = this.qwe.join(",");
      console.log(cids);
      // console.log(12);
      // return false;
      axios
        .post("/api/branchschool/signup", {
          uid: "1",
          tel: "13111111111",
          healthy_status: 0,
          hids: tids,
          cids: cids,
          price: "500",
          discount_gold: 500,
          photo: "http://oss.dayinyun.com/" + this.photo,
          just_img: "http://oss.dayinyun.com/" + this.just_img,
          back_img: "http://oss.dayinyun.com/" + this.back_img
        })
        .then(function(res) {
          if(res.code == 200){
          }
          if(res.code == 500){
            Toast(res.message);
          }
          console.log(res);
        })
        .catch(function(error) {
          // 上传失败
          console.log(222);
        });
    },
    getItem(num) {
      // this.activeClass = index; // 把当前点击元素的index，赋值给activeClass
      var titledata = this.name1;
      var titlearray = this.asd;
      for (var i = 0; i < titledata.length; i++) {
        if (titledata[i].id == num) {
          titledata[i].flag = true;
          console.log(titledata[i].id);
          titlearray.push(titledata[i].id);
          console.log(titlearray);
        }
      }
      this.asd = titlearray;
      this.tltie = titledata;
      // this.tltie[i].flag = !this.tltie[i].flag
      // if (this.tltie[i].flag) {
      //   this.asd.push(this.tltie[i])
      //   console.log(this.asd)
      // }
    },
    PostItem(ject) {
      console.log(ject);
      var titledata = this.name;
      var titlearray = this.qwe;
      for (var i = 0; i < titledata.length; i++) {
        if (titledata[i].id == ject) {
          titledata[i].flag = true;
          console.log(titledata[i].id);
          titlearray.push(titledata[i].id);
          console.log(titlearray);
        }
      }
      this.qwe = titlearray;
      console.log(this.q);
      this.name = titledata;
    },
    // 返回上一页
    top() {
      this.$router.go(-1);
    },
    // 详情页
    save() {
      var id = this.$route.query.id;
      console.log(id);
      List(id).then(res => {
        console.log(res);
      });
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    }
  },
  watch: {}
};
</script>

<style scoped>
/* 分销报名 */
.exportitem {
  width: 90%;
  margin: 0 auto;
  /* border-bottom: 1px solid #aaaa(83, 67, 67, 0.335); */
  /* padding-bottom: 30px; */
}
.exportitem .imgdiv,
.proveimg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #aaaa;
  /* display: block; */
  width: 100px;
  height: 160px;
  border-radius: 50%;
  /* line-height: 160px; */
  /* background: rgba(35, 35, 35, 1);
  opacity: 1;
  border-radius: 10px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 30px; */
}
.exportitem .imgdiv img:nth-of-type(1) {
  width: 137px;
  height: 120px;
  /* margin-left: 190px; */
}
.exportitem .imgdiv img:nth-of-type(2) {
  width: 75px;
  height: 70px;
  display: block;
  margin: 0 auto;
  /* margin-left:190px; */
}
.exportitem .imgdiv p {
  width: 550px;
  font-size: 28px;
  color: #fff;
}
.exportitem .imgdiv label {
  display: block;
  font-size: 28px;
  font-family: PingFang-SC-Medium;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-align: center;
  margin-top: 30px;
}
.exportitem1 {
  width: 90%;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  margin-top: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 30px;
}
.exportitem1 .imgdiv,
.frontimg,
.backimg {
  display: block;
  width: 48%;
  height: 230px;
  background: rgba(35, 35, 35, 1);
  opacity: 1;
  border-radius: 10px;
  margin-right: 4%;
}
.exportitem1 .imgdiv img,
.exportitem1 .imgdiv label {
  display: block;
}
.exportitem1 .imgdiv img {
  width: 160px;
  height: 110px;
  margin: 0 auto;
  margin-top: 30px;
}
.exportitem1 .imgdiv label {
  font-size: 28px;
  font-family: PingFang-SC-Medium;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-align: center;
  margin-top: 30px;
}
* {
  /* width: 100%;
  height: 100%; */
  background: #000;
  margin: 0;
  /* padding: 0; */
  color: #fff;
  width: 100%;
}
/* .nav_tab { */
/* width: 750px; */
/* border: 1px solid #fff; */
/* height: 112px; */
/* font-size: 31px; */
/* display: flex;
  justify-content: space-between; */
/* } */
/* .nav_tab p{
  width: 100px;
  height: 50px;
  border: 1px solid #fff;
  display: flex;
  justify-content: space-between;
}
.nav_tab p span {
  color: red;
} */
/* 底部提交按钮*/
.submit {
  /* width: 720px; */
  height: 100px;
  border-bottom: 1px solid #666666;
}
.submit button:nth-of-type(1) {
  background: #ffa300;
  width: 240px;
  height: 96px;
  font-size: 32px;
  line-height: 96px;
  border: none;
  text-align: center;
  color: #fff;
}
.submit button:nth-of-type(2) {
  background: #fe0000;
  width: 510px;
  color: #fff;
  height: 96px;
  font-size: 32px;
  line-height: 96px;
  text-align: center;
  border: none;
}

/* 订单列表 */
.order_lie {
  /* width: 750px; */
  height: 200px;
  background: #000;
}
.order {
  /* margin-top: 28px; */
  /* text-align: center; */
  /* width: 692px; */
  height: 282px;
  border-bottom: 1px solid #666666;
  margin-left: 14px;
  /* padding: 10px; */
}
.order p {
  /* margin: 10px; */
  font-size: 40px;
}
.order ul {
  /* width: 750px; */
  color: #fff;
  font-size: 34px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.order ul li {
  font-size: 34px;
  margin-top: 20px;
  /* color: #999999; */
}
.order ul .li1 {
  margin-left: 30px;
}
.wrapper {
  height: 100%;
  background: #000;
  color: #fff;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  position: relative;
  height: 83px;
  background: #000;
  display: flex;
  /* justify-content:space-between; */
  /* align-items: center; */
}
.header > img {
  width: 68px;
  height: 75px;
}
.header > p {
  font-size: 29px;
  position: absolute;
  /* margin-left: 280px; */
  /* top: 1px; */

  /* margin-left: 250px; */
}
.bannner-con {
  width: 100%;
  height: 360px;
  /* border: 1px solid #fff000; */
}
.bannner-con > img {
  width: 100%;
  height: 340px;
}
.van-tabs >>> .van-tabs__nav--line {
  padding-bottom: 20px;
}
.tabImg {
  width: 100%;
  height: 1150px;
}
.Head-portrait {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 170px;
  background: #000;
  /* border-bottom: 1px solid #eee; */
}
.Head-portrait .xxx input {
  width: 200px;
  height: 120px;
  background: none;
  border: none;
  opacity: 0;
  filter: alpha(opacity=0);
  font-size: 100px;
  position: absolute;
  top: 0;
  right: 0;
}
.Head-portrait .xxx {
  /* width: 50px; */
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-around;
}
.Head-portrait .xxx > img {
  width: 115px;
  height: 115px;
}
.Head-portrait .xxx > img:nth-of-type(2) {
  margin-right: 10px;
  width: 38px;
  height: 70px;
  margin-top: 20px;
}
.information {
  height: 600px;
  background: #000;
}
.information .card {
  /* width: 750px; */
  height: 289px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* margin-left: 8px; */
  margin-top: 7px;
  overflow: hidden;
  position: relative;
  /* border-bottom: 1px solid #eee; */
}
.information .card input {
  width: 337px;
  height: 250px;
  line-height: 450px;
  opacity: 0;
  filter: alpha(opacity=0);
  font-size: 100px;
  position: absolute;
  top: 0;
  left: 0;
}
.information .card .input1 {
  width: 337px;
  height: 350px;
  line-height: 350px;
  opacity: 0;
  filter: alpha(opacity=0);
  font-size: 100px;
  position: absolute;
  top: 0;
  left: 380px;
}
.information .card > img {
  width: 335px;
  height: 222px;
  /* margin: 0 0 0 5px; */
}
.phone {
  /* width: 100%; */
  height: 235px;
  /* border: 1px solid #FFF; */
}
.phone .shuru {
  width: 100%;
  /* margin-left: 18px; */
  height: 113px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  margin-top: 5px;
  font-size: 35px;
  margin-left: 20px;
}
.phone .shuru > input {
  /* width: 10px; */
  width: 450px;
  border: none;
}
.phone .zaici {
  margin-left: 20px;
  font-size: 28px;
  /* width: 100%; */
  /* margin-left: 18px; */
  font-size: 35px;
  height: 113px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  margin-top: 5px;
}
.phone .zaici > input {
  width: 450px;
  border: none;
  /* height: 40px; */
}
.health {
  margin-top: 30px;
  height: 260px;
  /* border: 1px solid #fff; */
}
.health span {
  margin: 0 0 0 20px;
  font-size: 35px;
}
.health ul {
  padding: 20px;
  /* margin-top: 20px; */
  width: 570px;
  height: 140px;
  display: flex;
  flex-wrap: wrap;
}
.health ul li {
  font-size: 26px;
  width: 174px;
  height: 53px;
  line-height: 53px;
  border: 1px solid #000;
  background: #232323;
  text-align: center;
  border-radius: 15px;
  /* margin: 5px 0 0 0; */
}
.selection {
  height: 770px;
  /* border: 1px solid #fff;/ */
  display: flex;
  flex-wrap: wrap;
}

.selection span {
  font-size: 35px;
  height: 300px;
}
.con-selection {
  width: 592px;
  /* text-align: center; */
  /* border: 1px solid #fff; */
}
.selection .con-selection {
  width: 350px;
  height: 360px;
  /* border: 1px solid #fff; */
  padding: 10px;
}
.selection .con-selection > img {
  width: 370px;
  height: 226px;
}

.selection .con-selection > span {
  margin-top: 25px;
  font-size: 35px;
}
.selection .con-selection > p {
  font-size: 35px;
  margin-top: 15px;
}
.tab_name {
  font-size: 36px;
  padding: 22px;
}
.tab_name > p {
  margin-top: 34px;
  font-size: 30px;
}
.tab_name > img {
  width: 688px;
  height: 376px;
}
.tab_name > span {
  margin-top: 34px;
  font-size: 30px;
}
</style>